iT邦幫忙

2026 iThome 鐵人賽

DAY 15
0
Vibe Coding

從 0 到 1: 產品設計師用 Vibe Coding 打造呼吸放鬆 App系列 第 15 篇

Day 15 | 開發 Part 1 - 呼吸練習的使用體驗

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20260925/20183825bvO3qIBzw2.png

開發目標與原則

先把功能做起來,再來打磨 UI 和產品細節

開發進度:呼吸練習體驗流程

今天請 Claude Code 幫我實作呼吸練習的核心流程。

選擇當下感受 → 選擇呼吸練習方式和時間 → 開始進行呼吸練習

目前已經完成了第一個版本,錄了一段 GIF 分享給大家。

Demo

目前發現的議題,未來需要打磨的 UI 和產品細節

背景造成的文字可讀性不佳問題

延用藍天背景後,其他頁面的部分白色文字變得不容易閱讀。後續會考慮調整非首頁畫面的背景與文字樣式,或以卡片承載資訊,讓文字與背景有所區隔。這部分會在後續調整。

https://ithelp.ithome.com.tw/upload/images/20260925/201838254LiJlFQIDV.png

主觀感受:動畫/畫面元素過於單調

目前的動畫是讓圓圈隨著呼吸節奏放大、縮小。我覺得視覺上略顯單調,後續想探索其他呈現方式。

Demo

其他 UI 元件一致性與定義

目前我還沒有明確定義字體、顏色、間距,以及按鈕、標籤等 UI 元件的樣式,導致實作出來的按鈕尺寸、不同畫面的字級不一致。後續會先整理這些定義,再和 AI 一起調整。

Day 16 預告

明天將會進行呼吸練習紀錄視覺化的開發,完成後再分享 Demo 及心得,明天見,Cheers 🍻


上一篇
Day 14 | 將 PRD 轉換為開發任務並開始 Vibe Coding 產品首頁
下一篇
Day 16 | 開發 Part 2 - 呼吸練習紀錄視覺化與優化呼吸方法選擇體驗流程
系列文
從 0 到 1: 產品設計師用 Vibe Coding 打造呼吸放鬆 App 共 21 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言